<template>
    <div class="ctrlBox">
        <van-popover @select="onSelect" placement="bottom-end" v-model:show="item.showPopover" :actions="actions">
            <template #reference>
                <div @click="showCtrl(index,item)" class="ctrlBtn iconfont icon-qita"></div>
            </template>
        </van-popover>
    </div>
  </template>
  
  <script>
  import {Toast } from 'vux'
    export default {
      components: {Toast},
      data() {
        return {
            actions:[
                { text: '删除商品', icon: 'delete-o' },
                { text: '编辑商品', icon: 'edit' },
            ],
        }
      },
      props: {
        item:Object,
        index:Number,
      },
      methods:{
        onSelect(data){
            if(data.text=='编辑商品'){
                this.$emit('editClick',this.item)
            }else {
                this.$emit('delClick',{index:this.index,item:this.item})
            }
        },
        showCtrl(){
            this.item.showPopover = !this.item.showPopover
        },
      },
      mounted(){
      },
      created() {
      },
    }
  </script>
  
  <style scoped lang="less">
  .ctrlBox{
    position: absolute;
    right: 0;
    top: 0;
    height: 1.5rem;
    background-color: #fff;
    border-radius: 0 0 0 0.75rem;
    padding: 0 0.5rem;
    .ctrlBtn{
        text-align: center;
        color: #999;
        line-height: 1.5rem;
        font-size: 1rem;
    }
}
            
  </style>
  